import React from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Select, Upload, Icon, Checkbox} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import BaseOpts from '../BaseOpts';
import LinkWhere from '../../common/linkWhere/index';
import SlideInput from '../../common/SlideInput/index';
import MUploadImg from '../../common/mUploadImg/index';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;

class MImageOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {
                linkGoods: null,
            },
            layout: {
                isAutoHeight: 0,
                isFullWidth: 0,
            }
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    render() {
        var {style, dataset, layout} = this.state.data;
        var imageUrl = dataset.url;
        var isAutoHeight = !layout ? false : layout.isAutoHeight == 1;
        var isFullWidth = !layout ? false : layout.isFullWidth == 1;
        var heightNum = parseFloat(style.height) * 0.01 * parseFloat(style.width) * 0.01 * 320 || 160;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上传图片</label>
                    <div className="optsPanel__item__bd">
                        <MUploadImg
                            imageUrl={imageUrl}
                            onChange={
                                (err, imgUrl) => {
                                    if (err) {
                                        return;
                                    }
                                    this.$dataChange('url', imgUrl, 'dataset');
                                }
                            }
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">背景颜色</label>
                    <div className="optsPanel__item__bd">
                        <ColorPicker color={style.backgroundColor || '#eee'} onChangeComplete={(color, rgba) => {
                            this.$dataChange('backgroundColor', rgba, 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">填充方式</label>
                    <div className="optsPanel__item__bd">
                        <Select defaultValue={style.backgroundSize || 'contain'} onChange={(val) => {
                            this.$dataChange('backgroundSize', val, 'style');
                        }}>
                            <Option value="cover">填满容器</Option>
                            <Option value="contain">显示在容器内</Option>
                        </Select>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">宽度</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__span">
                            <InputNumber disabled={isFullWidth} min={0} max={320}
                                         defaultValue={style.width * 320 || 320} onChange={(val) => {
                                this.$dataChange('width', val / 320 * 100 + '%', 'style');
                            }}/>
                        </div>
                        <div className="optsPanel__item__span">
                            <Checkbox
                                checked={isFullWidth}
                                onChange={(e) => {
                                    this.$dataChange('isFullWidth', e.target.checked ? 1 : 0, 'layout');
                                }}
                            >
                                宽度满屏
                            </Checkbox>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">高度</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__span">
                            <InputNumber disabled={isAutoHeight} min={0}
                                         defaultValue={heightNum} onChange={(val) => {
                                var {style} = this.state.data;
                                var widNum = (style.width || 1) * 320;

                                this.$dataChange('height', val / widNum * 100 + '%', 'style');
                            }}/>
                        </div>
                        <div className="optsPanel__item__span">
                            <Checkbox
                                checked={isAutoHeight}
                                onChange={(e) => {
                                    this.$dataChange('isAutoHeight', e.target.checked ? 1 : 0, 'layout');
                                }}
                            >
                                高度自动
                            </Checkbox>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">位置</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup
                            onChange={(e) => {
                                var val = e.target.value;

                                if (val == 'left') {
                                    this.$dataChange('marginLeft', 0, 'style');
                                    this.$dataChange('marginRight', 'auto', 'style');
                                } else if (val == 'center') {
                                    this.$dataChange('marginLeft', 'auto', 'style');
                                    this.$dataChange('marginRight', 'auto', 'style');
                                } else {
                                    this.$dataChange('marginLeft', 'auto', 'style');
                                    this.$dataChange('marginRight', 0, 'style');
                                }

                            }}
                            defaultValue={'center'}
                        >
                            <RadioButton value="left">居左</RadioButton>
                            <RadioButton value="center">居中</RadioButton>
                            <RadioButton value="right">居右</RadioButton>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item optsPanel__item_start">
                    <label className="optsPanel__item__hd">链接至</label>
                    <div className="optsPanel__item__bd">
                        <LinkWhere
                            onSelected={this._selected.bind(this)}
                            defaultLinkData={dataset.linkData}
                            defaultLinkType={dataset.linkType}
                        />
                    </div>
                </div>

            </div>
        );
    }

    _selected(linkData, linkType) {
        var data = this.state.data;

        data['dataset']['linkData'] = linkData;
        data['dataset']['linkType'] = linkType;

        this.setState({
            data
        });

        this.props.dataChange && this.props.dataChange(data);
    }
}

export default MImageOpts;
